<script setup lang="ts">
import bodyHeader from "@/components/layout/bodyHeader.vue";
import footerContent from "@/components/layout/footerContent.vue";
import chartContent from "@/components/layout/chartContent.vue";


import kyjbigVue from "@/components/itemContent/kyjbigVue.vue";
import tickIndex from "@/components/infoPanel/tickIndex.vue";
import gyfbsVue from "@/components/itemContent/gyfbsVue.vue";
import tfkVue from "@/components/itemContent/tfkVue.vue";
import fa1Vue from "@/components/itemContent/fa1Vue.vue";
import faVue from "@/components/itemContent/faVue.vue";
import jjcVue from "@/components/itemContent/jjcVue.vue";
import hjtVue from "@/components/itemContent/hjtVue.vue";
import mnstVue from "@/components/itemContent/mnstVue.vue";


import panelIndexSmall from "@/components/infoPanel/panelIndexSmall.vue";
import panelIndexBig from "@/components/infoPanel/panelIndexBig.vue";
import lgjVue from "@/components/itemContent/lgjVue.vue";

import { ref } from "vue";

const showBackToTop = ref(false);
const backToTop = () => {
  document.documentElement.scrollTop = 0;
  showBackToTop.value = false;
}
document.addEventListener('scroll', function () {
  document.documentElement.scrollTop === 0 ? showBackToTop.value = false : showBackToTop.value = true;
});
</script>

<template>
  <div class="bodyContainer">
    <bodyHeader></bodyHeader>
    <div class="bodyContent">
      <div class="viewContainer"></div>
      <div class="itemCon i344">
        <tickIndex :title="'344'"></tickIndex>
        <kyjbigVue></kyjbigVue>
      </div>
      <div class="itemCon i214">
        <tickIndex :title="'214'"></tickIndex>
        <kyjbigVue></kyjbigVue>
      </div>

      <div class="itemCon i3442">
        <gyfbsVue></gyfbsVue>
        <panelIndexBig :item-info="{}"></panelIndexBig>
      </div>
      <div class="itemCon i215">
        <panelIndexBig :item-info="{}" :position="'bottom'"></panelIndexBig>
        <gyfbsVue></gyfbsVue>
      </div>

      <div class="itemCon i3443">
        <tickIndex :title="'344/3'"></tickIndex>
        <lgjVue></lgjVue>
      </div>
      <div class="itemCon i216">
        <tickIndex :title="'216'"></tickIndex>
        <lgjVue></lgjVue>
      </div>

      <div class="itemCon i3441">
        <gyfbsVue></gyfbsVue>
        <panelIndexBig :item-info="{}"></panelIndexBig>
      </div>
      <div class="itemCon i217">
        <panelIndexBig :item-info="{}" :position="'bottom'"></panelIndexBig>
        <gyfbsVue></gyfbsVue>
      </div>

      <div class="itemCon i205">
        <tickIndex :title="'205'"></tickIndex>
        <tfkVue></tfkVue>
      </div>

      <div class="itemCon i34411">
        <panelIndexSmall :itemInfo="{}"></panelIndexSmall>
        <fa1Vue></fa1Vue>
      </div>

      <div class="itemCon i34412">
        <panelIndexSmall :itemInfo="{}"></panelIndexSmall>
        <fa1Vue></fa1Vue>
      </div>

      <div class="itemCon i34413">
        <panelIndexSmall :itemInfo="{}"></panelIndexSmall>
        <faVue></faVue>
      </div>

      <div class="itemCon i313A">
        <panelIndexSmall :itemInfo="{}"></panelIndexSmall>
        <jjcVue></jjcVue>
      </div>

      <div class="itemCon i311">
        <panelIndexSmall :itemInfo="{}"></panelIndexSmall>
        <hjtVue></hjtVue>
      </div>

      <div class="itemCon i331">
        <panelIndexSmall :itemInfo="{}"></panelIndexSmall>
        <mnstVue></mnstVue>
      </div>
    </div>
    <footerContent></footerContent>
    <chartContent></chartContent>
    <div class="backToTop" title="回到顶部" @click="backToTop" v-show="showBackToTop"></div>
  </div>
</template>

<style scoped lang="scss">
@import url('./theme/app.scss');

.backToTop {
  position: fixed;
  cursor: pointer;
  bottom: 50px;
  right: 50px;
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-image: url('/src/assets/gufeng/backTop.png');
}
</style>
